<template>
	<view class="transfer">
		<!-- #ifdef APP-PLUS -->
		<Hearder :name="'空间订单转移'"></Hearder>
		<!-- #endif -->
		<view class="navTab">
			<view :class="showTab==1?'active':''" @click="tab(1)">待确认</view>
			<view :class="showTab==2?'active':''" @click="tab(2)">转入记录</view>
			<view :class="showTab==3?'active':''" @click="tab(3)">转出记录</view>
		</view>
		<view class="shop-list">
			<view class="shop-every" v-for="item in list" :key="item.id">
				<view class="order-title">
					<view v-if="showTab==1">转移时间:{{item.create_time}}</view>
					<view v-if="showTab==2">转入时间:{{item.create_time}}</view>
					<view v-if="showTab==3">转出时间:{{item.create_time}}</view>
					<view class="state">{{item.status_title}}</view>
				</view>
				<view class="shop-con clearfix">
					<image :src="item.goods_thumb"></image>
					<view class="shop-right">
						<view class="title">{{item.goods_name}}</view>
						<view class="bot-box">
							<view>商品价格：<text>￥{{item.goods_price}}</text></view>
							<view class="zhuanyi" v-if="showTab==1 || showTab==2">
								<text>转移人</text>
								{{item.member.nickName}}({{item.member.mobile}})
							</view>
							<view class="zhuanyi changecor" v-if="showTab==1 || showTab==3">
								<text>转移到</text>
								{{item.to_member.nickName}}({{item.to_member.mobile}})
							</view>
						</view>
					</view>
				</view>
				<view class="box_btn" v-if="showTab==1 && item.is_display==1">
					<view @click="btnjjty('确认拒绝该商品转移?',item.id,2)">拒绝</view>
					<view @click="btnjjty('确认同意该商品转移?',item.id,1)">同意</view>
				</view>
			</view>
		</view>
		<view class="nidata" v-if="!list.length">
			<image src="../../static/images/noimg.png"></image>
		</view>
		<!-- 底部加载提示 -->
		<view class="uni-loadmore" v-if="showLoadMore">{{loadMoreText}}</view>
	</view>
</template>

<script>
	export default {
		data(){
			return{
				search:'',
				showTab:1,
				page:1,
				list:[],
				last_page:1,
				loadMoreText: "加载中...",
				showLoadMore:false,
			}
		},
		onLoad() {
			this.getinit()
		},
		// onReachBottom() {
		// 	this.page = this.page + 1
		// 	if (this.page > this.last_page) {
		// 		this.loadMoreText = "没有更多数据了!"
		// 		return;
		// 	}
		// 	this.showLoadMore = true;
		// 	this.getinit()
		// },
		methods:{
			getinit(){
				this.request('/space/getTransferList',{type:this.showTab}).then(res => {
					if(res.data.code==1){
						this.list = res.data.data
						// this.last_page = res.data.data.last_page
					}
				})
			},
			tab(t){
				this.showTab = t
				// this.page = 1
				// this.list = []
				this.getinit()
			},
			btnjjty(content,id,t){
				var that = this;
				uni.showModal({
				    title: '转移提示',
				    content: content,
				    success: function (res) {
				        if (res.confirm) {
				           that.request('/space/toTransferConfirm',{id:id,status:t}).then(res => {
				           	if(res.data.code==1){
				           		that.$tip(res.data.msg)
				           		that.getinit()
				           	}else{
				           		that.$tip(res.data.msg)
				           	}
				           })
				        } else if (res.cancel) {
				            console.log('用户点击取消');
				        }
				    }
				});
			}
		}
	}
</script>

<style scoped lang="scss">
	.transfer{
		min-height: 100%;
		background: #F8F8F8;
		.navTab{
			position: fixed;
			top: 160rpx;
			/* #ifdef H5 */
			top: 0;
			/* #endif */
			width: 100%;
			height: 80rpx;
			line-height: 80rpx;
			background: #fff;
			z-index: 9;
			border-bottom: $uni-border-bottom;
			view{
				position: relative;
				float: left;
				width: 33.3%;
				height: 100%;
				text-align: center;
				font-size: 28rpx;
				color: #999;
			}
			.active{
				font-weight: 800;
				color: $uni-item-color;
			 }
			.active::after{
			    content: '';
			    position: absolute;
			    bottom: 0;
			    width: 42rpx;
			    height: 4rpx;
			    background-color: $uni-item-color;
			    left: 50%;
			    transform: translateX(-50%);
			}
		}
		.shop-list{
			margin-top: 240rpx;
			/* #ifdef H5 */
			margin-top: 80rpx;
			/* #endif */
			.shop-every{
				background: #fff;
				margin-bottom: 18rpx;
				padding: 0 30rpx;
				.order-title{
					display: flex;
					justify-content: space-between;
					align-items: center;
					height: 82rpx;
					border-bottom: 1rpx solid #eee;
					view{
						font-size: 28rpx;
						color: #999;
					}
					.state{
						font-size: 26rpx;
						color: $uni-text-color;
					}
				}
				.shop-con{
					padding: 30rpx 0;
					>image{
						float: left;
						width: 200rpx;
						height: 200rpx;
						border-radius: 10rpx;
					}
					.shop-right{
						float: left;
						display: flex;
						flex-direction: column;
						justify-content: space-between;
						width: calc(100% - 220rpx);
						height: 200rpx;
						margin-left: 20rpx;
						.title{
							font-size: 28rpx;
							overflow: hidden;
							text-overflow: ellipsis;
							white-space: nowrap;
						}
						.bot-box{
							>view{
								font-size: 26rpx;
								text{
									font-size: 26rpx;
								}
								&:first-of-type{
									text{
										color: $uni-text-color;
									}
								}
							}
							.zhuanyi{
								margin-top: 20rpx;
								text{
									display: inline-block;
									width: 96rpx;
									height: 36rpx;
									background: #E56C35;
									color: #fff;
									text-align: center;
									line-height: 36rpx;
									margin-right: 20rpx;
								}
							}
							.changecor text{
								background: $uni-item-color;
							}
						}
					}
				}
				.box_btn{
					display: flex;
					justify-content: flex-end;
					align-items: center;
					height: 100rpx;
					border-top: 1rpx solid #eee;
					view{
						margin-left: 30rpx;
						font-size: 28rpx;
						color: #E56C35;
						height: 58rpx;
						border: 1rpx solid #E56C35;
						padding: 0 26rpx;
						line-height: 58rpx;
						&:last-of-type{
							background: #E56C35;
							color: #fff;
						}
					}
				}
			}
		}
	}
</style>